<!--  -->
<template>
<div class='applyForm-page'>
  <c-title text="参赛信息" :hide="false" ></c-title>
  <div class="applyForm-main">
    <div class="title">{{title}}</div>
    <van-form  >
      <van-cell-group :border="false">
        <van-field 
          label="参赛学员" 
          label-class="account-label"
          @click="studentPopOn('student')" 
          required 
          placeholder="请选择"
          v-model="studentName"
          readonly>
          <template #right-icon >
            <span class="iconfont icon-icon_more11"></span>
          </template>
        </van-field>
        <van-field 
          label="手机号" 
          label-class="account-label" 
          placeholder="请填写手机号码" 
          required 
          v-model="applyForm.mobile"
          >
          <template #button>
            <div class="verification-code" @click="verificationOn" v-if="!isDisable">{{codeText}}</div>
            <div class="verification-code"  v-else>{{codeText}}</div>
          </template>
        </van-field>
        <van-field 
          label="验证码" 
          label-class="account-label" 
          placeholder="请填写手机验证码" 
          required 
          v-model="applyForm.code"
          >
        </van-field>
        <van-field 
          label="作品名称" 
          label-class="account-label" 
          placeholder="请填写参赛作品名称"
          required
          v-model="applyForm.work_name"
          clearable
          >
        </van-field>
        <van-field 
          label="指导老师" 
          label-class="account-label" 
          placeholder="请填写指导老师"
          v-model="applyForm.teacher_name"
          clearable
          >
        </van-field>
        <van-field 
          label="老师手机号" 
          label-class="account-label" 
          placeholder="请填写指导老师手机号"
          v-model="applyForm.teacher_mobile"
          clearable
          >
        </van-field>
        <van-field 
          label="指导单位" 
          label-class="account-label" 
          placeholder="请填写指导单位"
          v-model="applyForm.unit"
          clearable
        >
        </van-field>
        <van-field 
          label="参赛组别" 
          label-class="account-label" 
          required 
          placeholder="请选择参赛组别"
          v-model="applyForm.group_name"
          @click="studentPopOn('group')" 
          
          readonly>
          <template #right-icon >
            <span class="iconfont icon-icon_more11"></span>
          </template>
        </van-field>
        <van-field
            label-class="account-label" 
            label="作品上传" 
            required 
            class="account-field" 
            >
            <template #input>
              <div class="identity-img" >
                <!--:preview-image="false"-->
                <van-uploader :after-read="onRead"  v-model="applyForm.work_url" accept="file"  :preview-image="false">
                  <div class="photoshow flex-a-c flex-j-c" >
                  <!--v-if="(fileType== 'image/png' || fileType== 'image/jpeg' || fileType== 'image/jpg' || fileType== 'image/gif')"/-->
                    <img :src="applyForm.work_url"  
                      v-if="applyForm.work_url && (fileType== 'image/png' || fileType== 'image/jpeg' || fileType== 'image/jpg' || fileType== 'image/gif')" >
                    <video 
                        width="105" 
                        height="105" 
                        :src="applyForm.work_url" 
                        :controls="false" 
                        poster 
                        v-else-if="applyForm.work_url && (fileType== 'video/mp4' || fileType== 'video/m3u8' || fileType== 'image/avi' || fileType== 'image/webm' || fileType== 'image/ogg')">
                        <source src="movie.mp4" type="video/mp4">
                        <source src="movie.m3u8" type="video/m3u8">
                        <source src="movie.webm" type="video/webm">
                        <source src="movie.avi" type="video/avi">
                        <source src="movie.ogg" type="video/ogg">
                        您的浏览器不支持Video标签。
                      </video>
                    <div class="crucifix" v-if="!applyForm.work_url"></div>
                  </div>
                  <div class="img-desc">上传图片或视频</div>
                </van-uploader>
                <!-- <div class="img-desc">上传图片或视频</div>  -->
              </div>
            </template>
          </van-field>
      </van-cell-group>
      <div  class="account-btn"  :style="iPnoneBottomBol ? 'padding-bottom: 34px;' : ''">
        <!--var(--themeBaseColor)-->
        <van-button round block type="info"  color="var(--themeBaseColor)" @click.stop="applyAffirm" >下一步</van-button>
      </div>
    </van-form>
  </div>
  <div class="mb-100"></div>
  <van-popup v-model="studentShow" position="bottom" @opened="studentOpen" lock-scroll @close="studentClose" round  :style="{height:'65%' }" closeable >
    <div class="student-main">
      <div class="student-title">{{applyTitle}}</div>
      <van-search
        v-model="relationName "
        shape="round"
        show-action
        placeholder="请输入学员名称"
        @search="onSearch"
        v-if="applyType =='student'"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
      <div class="student-list" ref="handpickList">
        <div class="flex student-flex" style="">
          <block v-for="(item,index) in studentArr" :key="index">
            <div class="student-item flex-a-c flex-j-sb" @click.stop="studentOn(item,index)">
              <h3 v-if="item.relation_name && applyType =='student'">{{item.relation_name}}</h3>
              <h3 v-if="item.group_name && applyType == 'group'">{{item.group_name}}</h3>
              <p class="iconfont icon-all_select_choose" v-if="studentIndex == index && applyType =='student'"></p>
              <p class="iconfont icon-all_select_choose" v-if="groupIndex == index && applyType =='group'"></p>
            </div>
          </block>
        </div>
       
      </div>
      <div class="mb-80"></div>
      <div  class="student-mb"  :style="iPnoneBottomBol ? 'bottom: 34px;' : ''" v-if="applyType =='student'" >
        <!--var(--themeBaseColor)-->
        <van-button round block type="info"   color="var(--themeBaseColor)" @click.stop="studentTo"  >添加学员</van-button>
      </div>
    </div>
  </van-popup>

</div>
</template>

<script>
import applyForm_controller from './applyForm_controller';
export default applyForm_controller;
</script>
<style lang="scss" scoped>
 ::v-deep .account-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: #00001C;
  }
  .student-flex {
    flex-direction: column;
  }
  .student-mb {
    margin:0.625rem 0.75rem 0 0.75rem;
    width:calc(100% - 1.5rem);
    position: fixed;
    bottom:0;
    left:0;
  }
  .mb-100 {
    height: 6.25rem;
    clear: both;
  }
  .mb-80 {
    height: 5.625rem;
    clear: both;
  }
  .pcStyle   .account-btn {
    width:23.4375rem;
    left:50%;
    transform: translate(-50%, 0);
  }
  .circle::v-deep .van-radio  {
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,20%);
  }
 .applyForm-main ::v-deep .van-cell {
    padding: 0.9375rem 1rem;
  }
  .wind-form ::v-deep .account-field {
    flex-direction: column;
  }
  .applyForm-main ::v-deep .van-cell:last-child {
    border-radius:  0 0 0.5rem 0.5rem;
  }
  .applyForm-main ::v-deep .van-cell:first-child {
    border-radius:  0.5rem 0.5rem 0 0 ;
  }
  .applyForm-main  ::v-deep .van-cell-group {
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  }
/* @import url(); 引入公共css类 */
  .applyForm-main {
    margin:0.625rem 0.75rem 0 0.75rem;
    background: #FFFFFF;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    padding:0.75rem 0;
    .title {
      font-weight: 500;
      font-size: 1rem;
      color: #00001C;
      position: relative;
      text-align: left;
      padding:0 0.75rem 0 1.1875rem;
      &::after {
        position: absolute;
        content: "";
        width: 0.1875rem;
        height: 0.9375rem;
        left:0.625rem;
        top:50%;
        transform: translate(0%, -50%);
        background: #F15353;
        border-radius: 0.125rem 0.125rem 0.125rem 0.125rem;
      }
    }
    .verification-code {
      font-size: 0.875rem;
      color: #F15353;
    }
  }
  .identity-img {
    position: relative;
    // padding:0.75rem 0 0 0;
    .photoshow {
      width: 6.5625rem;
      height: 6.5625rem;
      background: #F8F8F8;
      border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
      img {
        width: 6.5625rem;
        height: 6.5625rem;
        border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
      }
    }
    .img-desc {
      font-size: 0.75rem;
      color: #AAAAB3;
      // padding:0.625rem 0 0 0;
    }
    .crucifix {
      /* 十字架样式 */
      width: 1rem;
      height: 0.125rem;
      background: #D6D6DC;
      border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
      position: relative;

      &::after {
        content: "";
        width: 1rem;
        height: 0.125rem;
        background: #D6D6DC;
        border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
        position: absolute;
        transform: rotate(-90deg);
        left: 0;
      }
    }
  }
  .account-btn {
    width:100%;
    background-color: #fff;
    position: fixed;
    left:0;
    bottom:0;
    padding:0.625rem 0.75rem;
  }
  
  .student-main {
    .student-title {
      font-weight: 500;
      font-size: 0.9375rem;
      color: #00001C;
      padding:0.9375rem 0 0 0;
    }
    .student-list {
      margin:0.75rem 0.75rem 0 0.75rem;
      // height: 14.875rem;
      // overflow: hidden;
      // overflow-y: scroll;
      .student-item {
        padding:0.875rem 0;
        border-bottom: 0.0625rem solid #ECECEC;
        h3 {
          font-weight: 400;
          font-size: 0.875rem;
          color: #00001C;
        }
        .icon-all_select_choose {
          color:#F15353;
        }
      }
    }
  }
</style>